<template>
  <Card>
    <Alert v-if="openErrorAlert" show-icon type="error">审核不通过原因：{{ process.reason }}</Alert>
    <div id="outMaterial">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        物资出库
        <Divider/>
      </div>
      <div class="from">
        <Form ref="form" :label-width="170" :model="form" :rules="formValidate" inline>
          <div class="fromTitle">基础信息</div>
          <Row>
            <Col span="10">
            <Form-item label="出库时间：" prop="out_time">
              <DatePicker
                v-model="form.out_time"
                :editable="false"
                placeholder="选择时间"
                readonly
                type="datetime"
              ></DatePicker>
            </Form-item>
            </Col>
            <Col span="10">
            <FormItem label="车队：">
              <Input v-model="form.fleet" placeholder readonly/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="合计金额：">
              <Input v-model="form.total_money" placeholder readonly/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="经手人审核人员：">
              <Input v-model="form.handler_user_name" placeholder readonly/>
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">出库详情</div>
          <div class="btns"></div>
          <div style="margin-bottom:15px">
            <Table
              ref="selection"
              :columns="columns"
              :data="dataStart"
              :loading="loading"
              border
              height="350"
              size="small"
              stripe
              @on-selection-change="showSelect($event, 'start')"
            ></Table>
          </div>
          <div style="height:50px;"></div>
          <div style="width:100%">
            <Dropdown style="float:right" trigger="click" @on-click="audit">
              <Button type="primary">
                审核
                <Icon type="ios-arrow-down"></Icon>
              </Button>
              <DropdownMenu slot="list">
                <DropdownItem :disabled="auditDisabled" name="2">审核通过</DropdownItem>
                <DropdownItem :disabled="auditDisabled" name="4" style="color: #ed4014">审核不通过</DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <div style="clear: both;"></div>
          </div>
        </Form>
        <Modal v-model="reasonModal" :mask-closable="false" title="审核不通过原因">
          <Form ref="reasonForm" :model="reasonForm">
            <FormItem prop="reason">
              <Input v-model="reasonForm.reason" placeholder="请输入" size="large" type="textarea"/>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button :loading="reasonAuditLoading" type="primary" @click="goToAudit()">确定</Button>
          </div>
        </Modal>
        <div class="fromTitle">审核记录</div>
        <div id="auditRecord">
          <div v-for="item of auditRecord" :key="item.id" class="stepCard">
            <div>
              <p style="display: inline-flex;align-items: center">
                <Icon size="30" type="md-contact"/>
                {{ item.node_id }}
              </p>
              <span>时间：{{ item.created_at }} 操作：{{ item.result_name }}</span>
              <span v-if="item.reason !== null">操作理由：{{ item.reason }}</span>
            </div>
            <div>
              <p>单据编号：{{ form.odd_num }}</p>
              <div v-if="item.signature !== null"><p>签名：</p><img :src="item.signature" alt=""></div>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <!--    签名窗口-->
    <Modal
      v-model="signModal"
      :mask-closable="false"
      title="请签字确认"
      width="600"
    >
      <VueSignaturePad
        id="signature"
        ref="signaturePad"
        :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}"
        height="300px"
        width="100%"
      />
      <div slot="footer">
        <Button icon="md-undo" type="dashed" @click="undo">撤销</Button>
        <Button icon="md-refresh" @click="refresh">清除</Button>
        <Button :loading="signLoading" icon="md-checkmark" type="primary" @click="save">完成</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import './outMaterial.css'
import {materialListSelect, outMaterialInfo, toAuditOut} from '../../../api/material'
import {dictData} from '../../../api/insure'

export default {
  data() {
    return {
      submitLoading: false,
      submitResetLoading: false,
      submitAddPutLoading: false,
      reasonAuditLoading: false,
      loading: false,
      detailLoading: false,
      auditDisabled: false,
      form: {},
      detailForm: {},
      formValidate: {},
      editDetailForm: {},
      editDetailFormValidate: {},
      detailFormValidate: {},
      openErrorAlert: false,
      reasonForm: {
        reason: ''
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '物资名称',
          key: 'title',
          width: 150,
          align: 'left'
        },
        {
          title: '规格',
          key: 'specs',
          align: 'center'
        },
        {
          title: '单位',
          key: 'unit_title',
          align: 'center'
        },
        {
          title: '数量',
          key: 'amount',
          align: 'center'
        },
        {
          title: '单价',
          key: 'price',
          align: 'right'
        },
        {
          title: '总价',
          key: 'total_price',
          align: 'right'
        },
        {
          title: '是否消耗品',
          key: 'is_consumables_name',
          align: 'center'
        },
        {
          title: '线路',
          key: 'line',
          align: 'left'
        },
        {
          title: '车号',
          key: 'bus_num',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 200,
          align: 'right'
        }
      ],
      dict: [],
      busListData: [],
      index: 0,
      dataStart: [],
      modal: false,
      editModal: false,
      reasonModal: false,
      detailList: [],
      total: 2,
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      materialList: [],
      process: {
        reason: ''
      },
      auditRecord: [],
      signModal: false,
      signLoading: false,
    }
  },
  watch: {
    $route: 'getOutMaterialInfo'
  },
  mounted() {
    this.getDictData()
    this.getMaterialList()
    this.getOutMaterialInfo()
  },
  methods: {
    audit(name) {
      this.reasonForm.status = parseInt(name)
      if (parseInt(name) === 2) {
        this.$refs.signaturePad.clearSignature()
        this.signLoading = false
        this.signModal = true
        // this.goToAudit();
      } else {
        this.reasonModal = true
      }
    },
    getDictData() {
      dictData({title: '物资单位'}).then(res => {
        if (res.data.result) {
          this.dict = res.data.result
        }
      })
    },
    getMaterialList() {
      materialListSelect().then(res => {
        this.materialList = res.data.personnel
      })
    },
    getOutMaterialInfo() {
      if (this.$route.params.id) {
        this.loading = true
        outMaterialInfo({id: this.$route.params.id}).then(res => {
          this.loading = false
          const infoData = res.data.result
          this.form.odd_num = infoData.odd_num
          this.form.fleet = infoData.fleet
          this.form.handler_user_id = infoData.handler_user_id
          this.form.out_time = infoData.out_time
          this.detailList = this.dataStart = infoData.detailList
          let total_money = 0
          for (const i in this.detailList) {
            total_money =
              parseFloat(total_money) +
              parseFloat(this.detailList[i].total_price)
          }
          this.form.total_money = total_money.toFixed(2)
          this.form.handler_user_name = infoData.handler_user_name
          this.auditRecord = infoData.processLog
          this.process = infoData.process
          this.openErrorAlert =
            this.process.reason !== '' && this.process.status === 4
          if (infoData.process.status === 1 || infoData.process.status === 0 || infoData.process.status === 4) {
            this.auditDisabled = true
          } else if (infoData.role_name.indexOf('物资-发起人') != -1 && infoData.process.node_id == 25) {
            this.auditDisabled = true
          } else if (infoData.role_name.indexOf('物资-经手人') != -1 && infoData.process.node_id != 12) {
            this.auditDisabled = true
          } else if (infoData.role_name.indexOf('物资-仓库负责人') != -1 && infoData.process.node_id != 13) {
            this.auditDisabled = true
          } else if (infoData.role_name.indexOf('物资-负责人') != -1 && infoData.process.node_id != 14) {
            this.auditDisabled = true
          } else if (infoData.role_name.indexOf('物资-财务') != -1 && infoData.process.node_id != 15) {
            this.auditDisabled = true
          }
        })
      } else {
        this.auditDisabled = false
        this.reasonForm.reason = ''
      }
    },
    goToAudit(sign) {
      const id = this.$route.params.id
      const node_id = this.process.node_id
      const reason = this.reasonForm.reason
      const status = this.reasonForm.status
      this.reasonAuditLoading = true
      toAuditOut({
        status: status,
        id: id,
        node_id: node_id,
        reason: reason,
        sign: sign
      }).then(res => {
        this.reasonAuditLoading = false
        if (res.data.result) {
          this.signLoading = false
          this.signModal = false
          this.$Message.success('提交成功!')
          this.reasonModal = false
          this.$store.commit('closeTag', 'previewOutMaterial')
          this.$router.push({
            name: 'outMaterial'
          })
        }
      })
    },
    undo() {
      this.$refs.signaturePad.undoSignature()
    },
    refresh() {
      this.$refs.signaturePad.clearSignature()
    },
    save() {
      this.signLoading = true
      const {isEmpty, data} = this.$refs.signaturePad.saveSignature()
      if (!isEmpty) {
        this.goToAudit(data)
      } else {
        this.$Message.success('签名为空')
      }
    }
  }
}
</script>
<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}
</style>
